<!--
* description: 单个图片上传+预览
* author: wj
* createdDate: 2021-1-14
-->
<template>
  <section>
    <el-col :span="span">
      <lableName
        :validrule="validrule"
        :cur-label-name="curLabelName"
        :is-show-label="isShowLabel"
        :is-require="isRequire"
      />
      <div class="demo-image__preview">
        <el-image
          style="width: 60px; height: 60px"
          :src="imageUrl"
          :preview-src-list="srcList"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <validateFormate :cur-label-name="curLabelName" :validrule="validrule" />
    </el-col>
  </section>
</template>
<script>
// import validateFormate from "@/components/validateFormate";
export default {
  name: 'MdmUpload',
  components: {
    lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    validateFormate: () => import('@/components/validateFormate') // 校验提示样式组件
  },
  props: {
    code: { type: String, default: '' },
    validrule: { type: Object, default: () => {} },
    isRequire: { type: Boolean, default: false },
    isShowLabel: { type: Boolean, default: true },
    span: { type: Number, default: 6 },
    labelName: { type: String, default: '' },
    // 组件传值字段名称（与code对象绑定的字段名称，即视图中：formField对应的字段名称）
    // 如：视图中配置：code="formField.carBrandCode"，则codeField="carBrandCode"
    codeField: { type: String, default: '' },
    // 上次文件目录
    category: { type: String, default: 'commonUpload' },
    // mp功能url路径 属性:fileUrl
    dataToObject: {
      type: Object,
      default: () => {
        return {}
      }
    },
    action: { type: String, default: '' },
    accepttype: { type: String, default: '.jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP' }, // 文件类型限制
    limit: { type: Number, default: 1 }, // 文件个数限制
    disabled: { type: Boolean, default: false } // 是否禁用
  },
  data() {
    return {
      srcList: [],
      pic: true,
      imageUrl: '',
      modeCode: this.code,
      pictureCardShow: false,
      curLabelName:
        this.labelName === ''
          ? this.$t('sys.button.selFile') /* 选择文件*/
          : this.labelName
    }
  },
  watch: {
    code(newValue, oldValue) {
      this.modeCode = newValue
      if (this.modeCode && oldValue === '') {
        this.pictureCardShow = true
      }
    }
  },
  created() {
    this.imageUrl = this.modeCode
    this.srcList = [this.imageUrl]
  },
  methods: {

  }
}
</script>
<style>
.el-image-viewer__wrapper{
  z-index:4000 !important
}
</style>
<style lang="scss" scoped>
.demo-image__preview {
    float: left;
}
/deep/.el-icon-circle-close{
  background: none;
}
.el-icon-picture-outline{
  font-size: 60px;
}
</style>
